<script setup>


import {computed, onMounted, reactive, ref} from 'vue'

import {useRoute} from "vue-router";
import {getProductDetailAPI} from "../../apis/product.js";
import {message} from "ant-design-vue";
import {DollarOutlined} from '@ant-design/icons-vue'
import {addCartAPI} from "../../apis/cart.js";

const Route = useRoute()

const product = reactive({
  productCount: 0,
  productDetail: "",
  productMerchant: "",
  productPrice: 0,
  productSubTitle: "",
  productTitle: ""
})

// 获取商品详情
const getProductDetail = () => {
  getProductDetailAPI(Route.query.productId).then((res) => {
    console.log('获取商品详情', res)
    if (res.code === '0000') {
      product.productCount = res.data.productCount
      product.productDetail = res.data.productDetail
      product.productMerchant = res.data.productMerchant
      product.productPrice = res.data.productPrice
      product.productSubTitle = res.data.productSubTitle
      product.productTitle = res.data.productTitle
    } else {
      message.error(res.info)
    }
  })
}

// 添加到购物车的数量
const addCount = ref(1)

// 总计
const total = computed(() => {
  return addCount.value * product.productPrice
})

// 添加到购物车
const addCart = () => {
  let data = {
    sku: parseInt(Route.query.sku),
    productCover: '',
    productMerchant: product.productMerchant,
    productId: Route.query.productId,
    amount: product.productPrice,
    productTitle: product.productTitle,
    totalCount: addCount.value
  }
  addCartAPI(data).then((res) => {
    console.log('添加到购物车', res)
    if (res.code === '0000') {
      message.success(res.info)
    } else {
      message.error(res.info)
    }
  })
}

onMounted(() => {
  getProductDetail()
})
</script>

<template>
  <div class="bg-white">
    <div class="pt-28">


      <!-- Image gallery -->
      <div class="mx-auto mt-6 max-w-2xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-x-8 lg:px-8">
        <div class="aspect-h-4 aspect-w-3 hidden overflow-hidden rounded-lg lg:block">
          <img src="https://www.apple.com.cn/iphone-15-pro/images/specs/display_iphone_pro__digaep1mjw02_large_2x.jpg"
               alt="product.images[0].alt"
               class="h-full w-full object-cover object-center"/>
        </div>
        <div class="hidden lg:grid lg:grid-cols-1 lg:gap-y-8">
          <div class="aspect-h-2 aspect-w-3 overflow-hidden rounded-lg">
            <img src="https://www.apple.com.cn/v/iphone-15-pro/c/images/specs/chip__fuct924q1s66_large_2x.jpg" alt="66"
                 class="h-full w-full object-cover object-center"/>
          </div>
          <div class="aspect-h-2 aspect-w-3 overflow-hidden rounded-lg">
            <img
                src="https://www.apple.com.cn/iphone-15-pro/images/specs/dimensions_iphone_pro__b85lqt9aij1e_large_2x.jpg"
                alt="product.images[2].alt"
                class="h-full w-full object-cover object-center"/>
          </div>
        </div>
        <div class="aspect-h-5 aspect-w-4 lg:aspect-h-4 lg:aspect-w-3 sm:overflow-hidden sm:rounded-lg">
          <img src="https://www.apple.com.cn/v/iphone-15-pro/c/images/specs/hero_iphone_pro__c9kj8iil656q_large_2x.jpg"
               alt="product.images[3].alt"
               class="h-full w-full object-cover object-center"/>
        </div>
      </div>

      <!-- Product info -->
      <div
          class="mx-auto max-w-2xl px-4 pb-16 pt-10 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:grid-rows-[auto,auto,1fr] lg:gap-x-8 lg:px-8 lg:pb-24 lg:pt-16">
        <div class="lg:col-span-2 lg:border-r lg:border-gray-200 lg:pr-8">
          <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">{{ product.productTitle }}</h1>
        </div>

        <!-- Options -->
        <div class="mt-4 lg:row-span-3 lg:mt-0">
          <h2 class="sr-only">Product information</h2>
          <p class="text-3xl tracking-tight text-gray-900">¥{{ product.productPrice }}</p>


          <div class="mt-10">
            <a-input type="number" v-model:value.number="addCount" addon-before="购买商品数量" addon-after="个"/>
            <a-statistic
                title="总计"
                :value="total"
                :precision="2"
                suffix="元"
                :value-style="{ color: '#3f8600' }"

            >
              <template #prefix>
                <DollarOutlined/>
              </template>
            </a-statistic>
            <button
                @click="addCart"
                type="submit"
                class="mt-10 flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
              添加到购物车
            </button>
          </div>
        </div>

        <div class="py-10 lg:col-span-2 lg:col-start-1 lg:border-r lg:border-gray-200 lg:pb-16 lg:pr-8 lg:pt-6">
          <!-- Description and details -->
          <div>
            <h3 class="sr-only">Description</h3>

            <div class="space-y-6">
              <p class="text-base text-gray-900">{{ product.productDetail }}</p>
            </div>
          </div>

          <div class="mt-10">
            <h3 class="text-sm font-medium text-gray-900">店铺</h3>
            <a-tag :bordered="false">{{ product.productMerchant }}</a-tag>
          </div>

          <div class="mt-10">
            <h2 class="text-sm font-medium text-gray-900">介绍</h2>

            <div class="mt-4 space-y-6">
              <p class="text-sm text-gray-600">{{ product.productDetail }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>